<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://telegram.org/js/telegram-web-app.js"></script>
    <link rel="stylesheet" href="/styles/index.css" />
    <link rel="stylesheet" href="/styles/items/items.css" />
    <script src="/checkAuth.js" type="module"></script>
    <script src="/displayBalance.js" type="module"></script>
    <!-- Yandex.Metrika counter -->
    <script type="text/javascript">
      (function (m, e, t, r, i, k, a) {
        m[i] =
          m[i] ||
          function () {
            (m[i].a = m[i].a || []).push(arguments);
          };
        m[i].l = 1 * new Date();
        for (var j = 0; j < document.scripts.length; j++) {
          if (document.scripts[j].src === r) {
            return;
          }
        }
        (k = e.createElement(t)),
          (a = e.getElementsByTagName(t)[0]),
          (k.async = 1),
          (k.src = r),
          a.parentNode.insertBefore(k, a);
      })(
        window,
        document,
        "script",
        "https://mc.yandex.ru/metrika/tag.js",
        "ym"
      );

      ym(97272843, "init", {
        clickmap: true,
        trackLinks: true,
        accurateTrackBounce: true,
        webvisor: true,
      });
    </script>
    <noscript
      ><div>
        <img
          src="https://mc.yandex.ru/watch/97272843"
          style="position: absolute; left: -9999px"
          alt=""
        /></div
    ></noscript>
    <!-- /Yandex.Metrika counter -->
  </head>
  <body>
    <div class="navbar">
      <a class="tab" id="home" href="/">
        <img src="/image/house.svg" alt="house"/>
        <label for="home">Главная</label>
      </a>
      <a class="tab mButton" id="pay" href="/pay/">
        <img src="/image/wallet2.svg" alt="wallet"/>
        <label for="pay">Баланс</label>
      </a>
      <a class="tab mButton" id="schedule" href="/schedule/"
        ><img src="/image/calendar-week.svg" alt="calendar"/>
        <label for="schedule">Расписание</label>
      </a>
      <a class="tab" id="item">
        <img src="/image/mortarboard-1.svg" alt="mort"/>
        <label for="item">Предметы</label>
      </a>
      <a class="tab" id="another" href="/another/"
        ><img src="/image/three-dots.svg" alt="dots"/>
        <label for="another">Еще</label>
      </a>
    </div>
    <div class="header">
      <div class="header2">
        <div class="circle">
          <p class="circleName"></p>
        </div>
        <div class="nameHeader">
          <span id="displayName"></span>
          <img src="/image/chevron-right.svg" />
        </div>
      </div>
      <div class="balanceHeader">
        <div style="display: flex; align-items: center">
          <p src="/image/photoFromItems/GIK_200_1.png" id="headerRub">0</p>
          <p>₽</p>
        </div>
        <div style="display: flex; align-items: center">
          <p id="headerEuro">0</p>
          <p>€</p>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="mainHeader">
        <h1>Предметы</h1>
        <label for="liveInput" class="inp">
          <input type="text" id="liveInput" placeholder="&nbsp;" />
          <span class="label">Введите название предмета</span>
        </label>
      </div>
      <div class="moreAboutLesson classHide">
        <div>
          <!-- <div class="inlineContainer" id="backToLesson">
            <img
              src="/image/arrow_forward_ios_24dp_FILL0_wght600_GRAD0_opsz24 2.svg"
            />
            <h3>Назад к предметам</h3>
          </div> -->
          <h1 id="setNameLesson"></h1>
        </div>

        <div class="oneItem">
          <div class="imgBackground" id="setBgImage">
            <div class="age">
              <img src="/image/Ellipse 208.svg" />
              <p class="tooltip" id="setAgeLesson"></p>
            </div>
            <div class="inlineContainer">
              <div class="duration">
                <img src="/image/clock-icok.svg" />
                <h3 id="setDurationLesson"></h3>
              </div>
              <div class="cost">
                <img src="/image/rub-icon.svg" />
                <h3 id="setCostLesson"></h3>
              </div>
            </div>
          </div>
          <div class="bottom bottomOne">
            <p id="setAboutLesson"></p>
            <button id="textOnButton">Попробовать бесплатно</button>
            <a target="_blank" id="linkToSite"
              ><button class="goToSite">Читать подробнее на сайте</button></a
            >
          </div>
        </div>
      </div>
      <div id="innerLessonHier"></div>
    </div>
    <div class="alertPopUp"></div>

    <div id="referrernoAuthTrial" class="referrer">
      <form class="bPopupContent" id="noAuthTrial" method="post">
        <div class="flex">
          <img src="/image/Union.svg" class="closePopUp" />
        </div>
        <h1>Записаться на бесплатный пробный урок</h1>
        <h1 class="innerNameLesson fortest" id="nameLessonFromTrial"></h1>
        <input type="text" placeholder="Ваше имя" name="clientName"/>
        <input type="text" placeholder="Имя ребенка" name="childName" />
        <input type="number" placeholder="+71234567890" name="phoneNumber" id="requiredNumber1"/>
        <p class="errMsg" id="errMsg1"></p>
        <button type="submit" id="submitNoAuthTrial">Оставить заявку</button>
      </form>
    </div>

    <div id="referrerAuthTrial" class="referrer">
      <form class="bPopupContent" id="AuthTrial">
        <div class="flex">
          <img src="/image/Union.svg" class="closePopUp" />
        </div>
        <h1>Записаться на бесплатный пробный урок</h1>
        <h1 class="innerNameLesson" id="nameLessonAuthTrial"></h1>
        <!-- <input type="datetime-local" placeholder="Желаемая дата" /> -->
        <input
          class="pa__middle-input text"
          type="date"
          name="date"
          placeholder="Желаемая дата"
          onchange="this.className=(this.value!=''?'has-value':'')"
          required
        />
        <input type="text" placeholder="Имя ребенка" name="childName" required/>
        <input type="number" placeholder="+71234567890" name="phoneNumber" id="requiredNumber2"/>
        <p class="errMsg" id="errMsg2"></p>
        <!-- <input type="datetime-local" /> -->
        <button type="submit" id="submitAuthTrial">Оставить заявку</button>
      </form>
    </div>

    <div id="referrerAuthClient" class="referrer">
      <form class="bPopupContent" id="authClient">
        <div class="flex">
          <img src="/image/Union.svg" class="closePopUp" />
        </div>
        <h1>Записаться на урок</h1>
        <h1 class="innerNameLesson" id="lessonAuthClient"></h1>
        <!-- <input type="datetime-local" placeholder="Желаемая дата" /> -->
        <input
          class="pa__middle-input text"
          type="date"
          name="date"
          placeholder="Желаемая дата"
          onchange="this.className=(this.value!=''?'has-value':'')"
          required
        />
        <select name="timesOfDay" class="MyInput">
          <!--Supplement an id here instead of using 'name'-->
          <option value="--" selected>Желаемое время</option>
          <option value="Утро">Утро</option>
          <option value="День">День</option>
          <option value="Вечер">Вечер</option>
        </select>
        <input type="text" placeholder="Пожелания" name="comment" />
        <!-- <input type="datetime-local" /> -->
        <button type="submit" id="submitAuthClient">Оставить заявку</button>
      </form>
    </div>
    <script src="./script.js" type="module"></script>
  </body>
</html>
